<template>
  <div id="checkEmail">
    <!--<div class="header">-->
      <!--<span >-->

      <!--</span>-->
    <!--</div>-->
    <!--<hr/>-->
    <div class="body">
      <h1>邮件详情</h1>
      <div>
        <dl>
          <div v-for="email of emails">
            <dt>
              <img class="portrait" src="../../assets/person.jpg"/>
              <span class="emailInfo">
                <span class="sender">{{email.senderId.nickname}}</span><br/>
                <span class="date">{{email.time}}</span>
              </span>
            </dt>
            <dd>
              <h1 class="emailTitle">{{email.title}}</h1>
              <p class="emailContent">{{email.content}}</p>
            </dd>
          </div>
        </dl>
      </div>
      <hr/>
      <div class="wordPad">
        <el-input  type="textarea" :value="replyEmail.content" placeholder="我的回复" :rows="3">
        </el-input><br/>
        <el-button class="btn colorBtn" @click="replay">回复</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'checkEmail',
    data(){
      return {
        emails:[
//          {
//            portrait:'/static/img/user.8b303fb.png',
//            sender:'小劳劳',
//            date:'2017-08-08 12:00',
//            content:'人生要学会储蓄。你若耕耘，就储存了一次丰收；你若努力，就储存了一个希望；你若微笑，就储存了一份快乐。你能支取什么，取决于你储蓄了什么。没有储存友谊，就无法支取帮助；没有储存学识，就无法支取能力；没有储存汗水，就无法支取成功。想要有取之不尽的幸福，就要每天储蓄感恩和付出。'
//          },
//          {
//            portrait:'/static/img/user.8b303fb.png',
//            sender:'小劳劳',
//            date:'2017-08-08 12:00',
//            content:'人生要学会储蓄。你若耕耘，就储存了一次丰收；你若努力，就储存了一个希望；你若微笑，就储存了一份快乐。你能支取什么，取决于你储蓄了什么。没有储存友谊，就无法支取帮助；没有储存学识，就无法支取能力；没有储存汗水，就无法支取成功。想要有取之不尽的幸福，就要每天储蓄感恩和付出。'
//          },
//          {
//            portrait:'/static/img/user.8b303fb.png',
//            sender:'小劳劳',
//            date:'2017-08-08 12:00',
//            content:'人生要学会储蓄。你若耕耘，就储存了一次丰收；你若努力，就储存了一个希望；你若微笑，就储存了一份快乐。你能支取什么，取决于你储蓄了什么。没有储存友谊，就无法支取帮助；没有储存学识，就无法支取能力；没有储存汗水，就无法支取成功。想要有取之不尽的幸福，就要每天储蓄感恩和付出。'
//          },
//          {
//            portrait:'/static/img/user.8b303fb.png',
//            sender:'小劳劳',
//            date:'2017-08-08 12:00',
//            content:'人生要学会储蓄。你若耕耘，就储存了一次丰收；你若努力，就储存了一个希望；你若微笑，就储存了一份快乐。你能支取什么，取决于你储蓄了什么。没有储存友谊，就无法支取帮助；没有储存学识，就无法支取能力；没有储存汗水，就无法支取成功。想要有取之不尽的幸福，就要每天储蓄感恩和付出。'
//          },
        ],
        replyEmail:{
          to:'',
          content:'',
        }


      }
    },
    methods:{
//      chooseFriend(){
//
//      },
      replay(){

      }
    },
    created(){
      this.$http({
        method: 'get',
        url: 'email/read',
        params: {
          "id": this.$route.query.id
        }
      }).then((response)=>{
        response = response.data;
        let data = response.object;
        if(response.status == 'SUCCESS'){
          this.emails.splice(this.emails.length,0,data);
        }

      }).catch((err)=>{

      })
    }
  }
</script>
<style scoped>
  .btn{
    padding: 10px 30px;
  }
  .colorBtn{
    background-color: #f85377;
    color:white;
  }
  .header{
    box-sizing: content-box;
    padding: 20px 30px;
  }
  .inputFriend{
    height: 30px;
    padding:0px 10px;
    border: 1px solid #cacaca;
    border-radius: 15px;
  }
  .inputFriend:focus{
    outline: none;
  }
  hr{
    margin: 0px;
    border: none;
    border-bottom: 1px solid #cacaca;
  }
  .body{
    min-height: 500px;
  }
  .body>h1{
    font-size: 17px;
    margin: 10px 0px 5px;
    color: #f85377;
  }
  dl{
    max-height: 450px;
    margin-right: -12px;
    overflow: auto;
  }

  dt{

    padding: 10px 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #acacac;
    font-weight: normal;
    position: sticky;
    top: -1px;
    background-color: rgba(255, 255, 255, 0.85);
  }
  dl>div:first-child>dt{
    border-top: none;
  }
  .portrait{
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 0px 15px;
  }
  .sender{
    font-size: 15px;
  }
  .date{
    font-size: 12px;
    color: #8d8d8d;
  }
  dd{
    margin:0px 20px;
    padding: 18px;
    border-top: 1px solid #cacaca;
    min-height: 150px;
  }
  .emailTitle{
    font-size: 1.2em;
    margin: 0.2em ;
    color: #f85377;
    text-align: center;
  }
  .emailContent{
    text-indent: 2em;
  }
  hr{
    border-color: #cacaca;
    margin: 15px 0px;
  }
  .wordPad{
    margin-bottom: 15px;
    text-align: center;
  }
  .wordPad>textarea{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    min-height: 120px;
    margin-bottom: 10px;
    border-color: #cacaca;
    resize: vertical;
  }
  .wordPad>textarea:focus{
    outline: none;
  }
</style>